feat(examples): add Material UI chat example (#392)#587
Conversation
Add `examples/material-ui-chat`, a generative-UI chat app that maps OpenUI Lang onto a Material UI component library — cards, tables, forms, tabs, accordion, alert, list, and charts (via `@mui/x-charts`) — with MUI `ThemeProvider`/`CssBaseline` theming, a system + manual light/dark toggle, and an OpenAI streaming chat route. Mirrors the structure of the `shadcn-chat` example; the system prompt is generated from the library via the OpenUI CLI (`openui generate src/library.ts`). Closes thesysdev#392. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@Shinyaigeek thanks a lot for your contribution! I will review this soon. |
| name: "Heading", | ||
| props: HeadingSchema, | ||
| description: 'Section heading. level: "h1" | "h2" | "h3" | "h4".', | ||
| component: ({ props }) => { |
There was a problem hiding this comment.
During streaming, props.level can temporarily contain a partial value such as "h" before completing to "h2". Since it is passed directly to Typography’s component prop, React attempts to render an invalid <h> element and logs a console error. Could we validate the value against h1–h4 and fall back to h2 for partial or invalid values?
There was a problem hiding this comment.
The default MUI chart tooltip is portaled to the document body and becomes detached from the chart when the chat container scrolls, leaving it fixed near the top of the viewport. Could we configure the tooltip Popper here so it remains anchored correctly within the scrolling chat surface, or closes when the chart scrolls out of view?
2 participants
Closes #392.
Adds
examples/material-ui-chat— a generative-UI chat app that maps OpenUI Lang onto a Material UI component library, as the MUI counterpart toexamples/shadcn-chat. It shows how to integrate OpenUI with an existing design system (MUI components + theme), including light/dark mode.What's included
src/lib/mui-genui/) wrapping MUI primitives, covering a representative subset:CardHeader,TextContent,Heading,Alert,List,Separator,Progress,Table,BarChart/LineChart/PieChart(via@mui/x-charts),Form/FormControl/Input/Select/SwitchGroup,Button/Buttons,Tabs,Accordion,FollowUpBlock(~22 components).src/app/api/chat/route.ts) usingrunTools+ SSE, mirroringshadcn-chat.ThemeProvider+CssBaselinewith a system-preference + manual light/dark toggle.openui generate src/library.ts).Verification
pnpm install✅pnpm generate:prompt✅ (writessrc/generated/system-prompt.txt)tsc --noEmit✅next build✅🤖 Generated with Claude Code